<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <style type="text/css">
        #box{
            width:400px;
            margin: 0 auto;
        }
        #div1{
            width:100px;
            height:100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="按钮" @click="toggle">
    <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
</body>
<script type="text/javascript" src="./bower_components/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            bSign:true
        },
        methods:{
            toggle(){
                this.bSign=!this.bSign;
            }
        },
        transitions:{ //定义所有动画名称
            bounce:{
                enterClass:'zoomInLeft',
                leaveClass:'zoomOutRight'
            }
        }
    });
</script>
</html>